<template>
    <div class="group">
        <!-- TransitionGroup -->
        <button @click="add">ADD</button><button v-on:click="remove">REMOVE</button>
        <div class="wraps">
            <TransitionGroup enter-active-class="animate__animated animate__zoomInDown"
                leave-active-class="animate__animated animate__rotateOut">
                <div class="items" v-for="item in list" :key="item.id">
                    我叫{{ item.name }}---今年{{ item.age }}岁
                </div>
            </TransitionGroup>
        </div>
        <!-- Transition -->
        <el-button @click="flag = !flag">切换</el-button>
        <div style="height: 300px;margin-top: 20px;">
            <Transition  name="custom-classes" enter-active-class="animate__animated animate__zoomInDown"
                leave-active-class="animate__animated animate__rotateOut" mode="out-in">
                <div class="box" v-show="flag">
                <p>八嘎</p>
                <p>八嘎</p>
                <p>八嘎</p>
            </div>
            </Transition>
           
        </div>

        <div>
            <el-button @click="animation">动画</el-button>
            <TransitionGroup tag="div" class="wraps_item" move-class="mmm">
  <!-- TransitionGroup过渡动画 -->
  <div v-for="item in listNum" :key="item.id" class="item" > 
                {{ item.number }}
            </div>
            </TransitionGroup>
          
        </div>

    </div>
</template>

<script setup lang="ts">
import { ref, reactive, toRefs, onMounted } from 'vue'
import _ from 'lodash'
//定义list
const list = reactive(
    [
        {
            id: 1,
            name: '柳俊',
            age: 24
        },
        {
            id: 2,
            name: '王二',
            age: 27
        },
        {
            id: 3,
            name: '李四',
            age: 29
        },
    ]
)
//添加数组
function add() {
    list.unshift({
        id: list.length + 1,
        name: '李四' + list.length + 1,
        age: 29 + list.length + 1
    })
}
//删除数组
function remove() {
    list.pop()
}

//定义显示
const flag = ref<boolean>(true)

//定义91个数组
const listNum = ref(Array.apply(null,{length:81} as number[]).map((_,index)=>{
    return {
        id:index,
        number:(index % 9) +1
    }
}))
console.log(listNum);
//设置动画
function animation(){
    listNum.value = _.shuffle(listNum.value)
}
</script>
<style scoped lang="scss">
.wraps {
    display: flex;
    flex-wrap: wrap;
    word-break: break-all;
    border: 1px solid #ccc;

    .items {
        margin: 10px;
    }
}

.box {
    width: 200px;
    height: 200px;
    background: #00ff00;
}
.wraps_item{
    width:calc(20px * 12);
    display: flex;
    flex-wrap: wrap;
    .item{
        width: 20px;
        border: 1px solid #ccc;
        margin: 2px;
    }
}
.mmm{
    transition: all 1s; //给元素添加过渡效果
}
</style>